Tarayıcı Uzantısı Arka Plan Betikleri: JavaScript Service Worker Geçişini Benimsemek

Tarayıcı uzantısı geliştirme dünyası sürekli olarak gelişmektedir. Son zamanlardaki en önemli değişikliklerden biri, arka plan betikleri için geleneksel kalıcı arka plan sayfalarından JavaScript Service Worker'lara geçiştir. Büyük ölçüde Chromium tabanlı tarayıcılardaki Manifest V3 (MV3) tarafından yönlendirilen bu geçiş, çok sayıda avantaj getirmesinin yanı sıra geliştiriciler için benzersiz zorluklar da sunmaktadır. Bu kapsamlı rehber, bu değişikliğin ardındaki nedenleri, avantajları ve dezavantajları ve geçiş sürecinin ayrıntılı bir anlatımını ele alarak uzantınız için sorunsuz bir geçiş sağlayacaktır.

Neden Service Worker'lara Geçiş Yapılmalı?

Bu geçişin arkasındaki temel motivasyon, tarayıcı performansını ve güvenliğini artırmaktır. Manifest V2'de (MV2) yaygın olan kalıcı arka plan sayfaları, boşta olduklarında bile önemli kaynaklar tüketebilir, bu da pil ömrünü ve genel tarayıcı duyarlılığını etkiler. Service Worker'lar ise olay güdümlüdür ve yalnızca gerektiğinde aktiftir.

Service Worker'ların Avantajları:

• Geliştirilmiş Performans: Service Worker'lar yalnızca bir API çağrısı veya uzantının başka bir bölümünden gelen bir mesaj gibi bir olay onları tetiklediğinde aktiftir. Bu "olay güdümlü" doğa, kaynak tüketimini azaltır ve tarayıcı performansını artırır.
• Artırılmış Güvenlik: Service Worker'lar daha kısıtlı bir ortamda çalışır, bu da saldırı yüzeyini azaltır ve uzantının genel güvenliğini artırır.
• Geleceğe Hazırlık: Çoğu büyük tarayıcı, uzantılarda arka plan işlemleri için standart olarak Service Worker'lara yönelmektedir. Şimdi geçiş yapmak, uzantınızın uyumlu kalmasını ve gelecekteki kullanımdan kaldırma sorunlarından kaçınmasını sağlar.
• Engellemeyen İşlemler: Service Worker'lar, ana iş parçacığını engellemeden arka planda görevleri yerine getirmek üzere tasarlanmıştır, bu da daha sorunsuz bir kullanıcı deneyimi sağlar.

Dezavantajlar ve Zorluklar:

• Öğrenme Eğrisi: Service Worker'lar, kalıcı arka plan sayfalarına alışkın geliştiriciler için zorlayıcı olabilecek yeni bir programlama modeli sunar. Olay güdümlü doğa, durumu ve iletişimi yönetmek için farklı bir yaklaşım gerektirir.
• Kalıcı Durum Yönetimi: Service Worker aktivasyonları arasında kalıcı durumu korumak dikkatli bir değerlendirme gerektirir. Storage API veya IndexedDB gibi teknikler çok önemli hale gelir.
• Hata Ayıklama Karmaşıklığı: Service Worker'larda hata ayıklamak, aralıklı doğaları nedeniyle geleneksel arka plan sayfalarında hata ayıklamaktan daha karmaşık olabilir.
• DOM'a Sınırlı Erişim: Service Worker'lar DOM'a doğrudan erişemezler. Web sayfalarıyla etkileşim kurmak için içerik betikleriyle iletişim kurmaları gerekir.

Temel Kavramları Anlamak

Geçiş sürecine dalmadan önce, Service Worker'ların arkasındaki temel kavramları kavramak önemlidir:

Yaşam Döngüsü Yönetimi

Service Worker'ların aşağıdaki aşamalardan oluşan belirgin bir yaşam döngüsü vardır:

• Kurulum (Installation): Service Worker, uzantı ilk yüklendiğinde veya güncellendiğinde kurulur. Bu, statik varlıkları önbelleğe almak ve ilk kurulum görevlerini gerçekleştirmek için ideal zamandır.
• Aktivasyon (Activation): Kurulumdan sonra Service Worker etkinleştirilir. Bu, olayları işlemeye başlayabileceği noktadır.
• Boşta (Idle): Service Worker, kendisini tetikleyecek olayları bekleyerek boşta kalır.
• Sonlandırma (Termination): Service Worker artık ihtiyaç duyulmadığında sonlandırılır.

Olay Güdümlü Mimari

Service Worker'lar olay güdümlüdür, yani yalnızca belirli olaylara yanıt olarak kod çalıştırırlar. Yaygın olaylar şunları içerir:

• install: Service Worker kurulduğunda tetiklenir.
• activate: Service Worker etkinleştirildiğinde tetiklenir.
• fetch: Tarayıcı bir ağ isteğinde bulunduğunda tetiklenir.
• message: Service Worker, uzantının başka bir bölümünden bir mesaj aldığında tetiklenir.

Süreçler Arası İletişim

Service Worker'ların içerik betikleri ve açılır pencere betikleri gibi uzantının diğer bölümleriyle iletişim kurmasının bir yoluna ihtiyacı vardır. Bu genellikle chrome.runtime.sendMessage ve chrome.runtime.onMessage API'ları kullanılarak gerçekleştirilir.

Adım Adım Geçiş Rehberi

Tipik bir tarayıcı uzantısını kalıcı bir arka plan sayfasından bir Service Worker'a taşıma sürecini adım adım inceleyelim.

Adım 1: Manifest Dosyanızı Güncelleyin (manifest.json)

İlk adım, manifest.json dosyanızı bir Service Worker'a geçişi yansıtacak şekilde güncellemektir. "background" alanını kaldırın ve yerine "service_worker" özelliğini içeren "background" alanını ekleyin.

Örnek Manifest V2 (Kalıcı Arka Plan Sayfası):

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Örnek Manifest V3 (Service Worker):

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Önemli Hususlar:

• manifest_version değerinizin 3 olarak ayarlandığından emin olun.
• "service_worker" özelliği, Service Worker betiğinizin yolunu belirtir.

Adım 2: Arka Plan Betiğinizi Yeniden Düzenleyin (background.js)

Bu, geçiş sürecindeki en önemli adımdır. Arka plan betiğinizi Service Worker'ların olay güdümlü doğasına uyum sağlayacak şekilde yeniden düzenlemeniz gerekir.

1. Kalıcı Durum Değişkenlerini Kaldırın

MV2 arka plan sayfalarında, farklı olaylar arasında durumu korumak için global değişkenlere güvenebilirdiniz. Ancak, Service Worker'lar boşta kaldıklarında sonlandırılır, bu nedenle global değişkenler kalıcı durum için güvenilir değildir.

Örnek (MV2):

var counter = 0;

chrome.browserAction.onClicked.addListener(function(tab) {
  counter++;
  console.log("Counter: " + counter);
});

Çözüm: Storage API veya IndexedDB Kullanın

Storage API (chrome.storage.local veya chrome.storage.sync), verileri kalıcı olarak depolamanıza ve almanıza olanak tanır. IndexedDB, daha karmaşık veri yapıları için başka bir seçenektir.

Örnek (MV3 ve Storage API):

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.storage.local.get(['counter'], function(result) {
    var counter = result.counter || 0;
    counter++;
    chrome.storage.local.set({counter: counter}, function() {
      console.log("Counter: " + counter);
    });
  });
});

Örnek (MV3 ve IndexedDB):

// IndexedDB veritabanını açmak için fonksiyon
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 1);

    request.onerror = (event) => {
      reject('Error opening database');
    };

    request.onsuccess = (event) => {
      resolve(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore('myObjectStore', { keyPath: 'id' });
    };
  });
}

// IndexedDB'den veri almak için fonksiyon
function getData(db, id) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readonly');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onerror = (event) => {
      reject('Error getting data');
    };

    request.onsuccess = (event) => {
      resolve(request.result);
    };
  });
}

// IndexedDB'ye veri koymak için fonksiyon
function putData(db, data) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data);

    request.onerror = (event) => {
      reject('Error putting data');
    };

    request.onsuccess = (event) => {
      resolve();
    };
  });
}

chrome.browserAction.onClicked.addListener(async (tab) => {
  try {
    const db = await openDatabase();
    let counterData = await getData(db, 'counter');
    let counter = counterData ? counterData.value : 0;

    counter++;

    await putData(db, { id: 'counter', value: counter });
    db.close();
    console.log("Counter: " + counter);

  } catch (error) {
    console.error("IndexedDB Error: ", error);
  }
});

2. Olay Dinleyicilerini Mesajlaşma ile Değiştirin

Arka plan betiğiniz içerik betikleriyle veya uzantının diğer bölümleriyle iletişim kuruyorsa, mesajlaşma kullanmanız gerekecektir.

Örnek (Arka plan betiğinden içerik betiğine mesaj gönderme):

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === "get_data") {
      // Veri almak için bir şeyler yapın
      let data = "Example Data";
      sendResponse({data: data});
    }
  }
);

Örnek (İçerik betiğinden arka plan betiğine mesaj gönderme):

chrome.runtime.sendMessage({message: "get_data"}, function(response) {
  console.log("Received data: " + response.data);
});

3. Başlatma Görevlerini `install` Olayında Ele Alın

install olayı, Service Worker ilk kurulduğunda veya güncellendiğinde tetiklenir. Bu, veritabanları oluşturmak veya statik varlıkları önbelleğe almak gibi başlatma görevlerini gerçekleştirmek için mükemmel bir yerdir.

Örnek:

chrome.runtime.onInstalled.addListener(function() {
  console.log("Service Worker installed.");
  // Başlatma görevlerini burada gerçekleştirin
  chrome.storage.local.set({initialized: true});
});

4. Ekran Dışı Belgeleri (Offscreen Documents) Değerlendirin

Manifest V3, daha önce arka plan sayfalarında ses çalma veya pano etkileşimi gibi DOM erişimi gerektiren görevleri ele almak için ekran dışı belgeleri tanıttı. Bu belgeler ayrı bir bağlamda çalışır ancak service worker adına DOM ile etkileşime girebilir.

Eğer uzantınızın DOM'u kapsamlı bir şekilde manipüle etmesi veya mesajlaşma ve içerik betikleriyle kolayca başarılamayan görevleri gerçekleştirmesi gerekiyorsa, ekran dışı belgeler doğru çözüm olabilir.

Örnek (Ekran Dışı Belge Oluşturma):

// Arka plan betiğinizde:
async function createOffscreen() {
  if (await chrome.offscreen.hasDocument({
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  })) {
    return;
  }
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  });
}

chrome.runtime.onStartup.addListener(createOffscreen);
chrome.runtime.onInstalled.addListener(createOffscreen);

Örnek (offscreen.html):

<!DOCTYPE html>
<html>
<head>
  <title>Offscreen Document</title>
</head>
<body>
  <script src="offscreen.js"></script>
</body>
</html>

Örnek (offscreen.js, ekran dışı belgede çalışan):

// Service worker'dan gelen mesajları dinle
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Burada DOM ile bir şeyler yapın
    document.body.textContent = 'Action performed!';
    sendResponse({ result: 'success' });
  }
});

Adım 3: Uzantınızı Kapsamlı Bir Şekilde Test Edin

Arka plan betiğinizi yeniden düzenledikten sonra, yeni Service Worker ortamında doğru şekilde çalıştığından emin olmak için uzantınızı kapsamlı bir şekilde test etmek çok önemlidir. Aşağıdaki alanlara özellikle dikkat edin:

• Durum Yönetimi: Kalıcı durumunuzun Storage API veya IndexedDB kullanılarak doğru bir şekilde saklandığını ve alındığını doğrulayın.
• Mesajlaşma: Mesajların arka plan betiği, içerik betikleri ve açılır pencere betikleri arasında doğru bir şekilde gönderilip alındığından emin olun.
• Olay İşleme: Tüm olay dinleyicilerinin beklendiği gibi tetiklendiğinden emin olmak için test edin.
• Performans: Uzantınızın aşırı kaynak tüketmediğinden emin olmak için performansını izleyin.

Adım 4: Service Worker'larda Hata Ayıklama

Service Worker'larda hata ayıklamak, aralıklı doğaları nedeniyle zorlayıcı olabilir. İşte Service Worker'ınızda hata ayıklamanıza yardımcı olacak bazı ipuçları:

• Chrome Geliştirici Araçları (DevTools): Service Worker'ı incelemek, konsol günlüklerini görüntülemek ve kesme noktaları (breakpoints) ayarlamak için Chrome Geliştirici Araçları'nı kullanın. Service Worker'ı "Application" sekmesi altında bulabilirsiniz.
• Kalıcı Konsol Günlükleri: Service Worker'ınızın yürütme akışını izlemek için console.log ifadelerini bolca kullanın.
• Kesme Noktaları (Breakpoints): Yürütmeyi duraklatmak ve değişkenleri incelemek için Service Worker kodunuzda kesme noktaları ayarlayın.
• Service Worker Denetçisi: Service Worker'ın durumunu, olaylarını ve ağ isteklerini görüntülemek için Chrome Geliştirici Araçları'ndaki Service Worker denetçisini kullanın.

Service Worker Geçişi İçin En İyi Uygulamalar

Tarayıcı uzantınızı Service Worker'lara taşırken izlemeniz gereken bazı en iyi uygulamalar şunlardır:

• Erken Başlayın: Service Worker'lara geçmek için son dakikayı beklemeyin. Kodunuzu yeniden düzenlemek ve uzantınızı test etmek için kendinize bolca zaman tanımak amacıyla geçiş sürecine mümkün olan en kısa sürede başlayın.
• Görevi Parçalara Ayırın: Geçiş sürecini daha küçük, yönetilebilir görevlere ayırın. Bu, süreci daha az göz korkutucu ve takip etmesi daha kolay hale getirecektir.
• Sık Sık Test Edin: Hataları erken yakalamak için geçiş süreci boyunca uzantınızı sık sık test edin.
• Kalıcı Durum için Storage API veya IndexedDB Kullanın: Kalıcı durum için global değişkenlere güvenmeyin. Bunun yerine Storage API veya IndexedDB kullanın.
• İletişim için Mesajlaşma Kullanın: Arka plan betiği, içerik betikleri ve açılır pencere betikleri arasında iletişim kurmak için mesajlaşma kullanın.
• Kodunuzu Optimize Edin: Kaynak tüketimini en aza indirmek için kodunuzu performans için optimize edin.
• Ekran Dışı Belgeleri Değerlendirin: DOM'u kapsamlı bir şekilde manipüle etmeniz gerekiyorsa, ekran dışı belgeleri kullanmayı düşünün.

Uluslararasılaştırma Hususları

Küresel bir kitle için tarayıcı uzantıları geliştirirken, uluslararasılaştırma (i18n) ve yerelleştirmeyi (l10n) dikkate almak çok önemlidir. Uzantınızın dünya çapındaki kullanıcılar için erişilebilir olmasını sağlamak için bazı ipuçları:

• `_locales` Klasörünü Kullanın: Uzantınızın çevrilmiş dizelerini _locales klasöründe saklayın. Bu klasör, desteklenen her dil için alt klasörler ve çevirileri içeren bir messages.json dosyası içerir.
• `__MSG_messageName__` Sözdizimini Kullanın: Kodunuzda ve manifest dosyanızda çevrilmiş dizelerinize atıfta bulunmak için __MSG_messageName__ sözdizimini kullanın.
• Sağdan Sola (RTL) Dilleri Destekleyin: Uzantınızın düzeninin ve stilinin Arapça ve İbranice gibi RTL dillerine doğru şekilde uyarlandığından emin olun.
• Tarih ve Saat Biçimlendirmesini Dikkate Alın: Her yerel ayar için uygun tarih ve saat biçimlendirmesini kullanın.
• Kültürel Olarak İlgili İçerik Sağlayın: Uzantınızın içeriğini farklı bölgelere kültürel olarak uygun olacak şekilde uyarlayın.

Örnek (_locales/en/messages.json):

{
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension"
  },
  "buttonText": {
    "message": "Click Me",
    "description": "The text for the button"
  }
}

Örnek (Kodunuzda çevrilmiş dizelere atıfta bulunma):

document.getElementById('myButton').textContent = chrome.i18n.getMessage("buttonText");

Sonuç

Tarayıcı uzantınızın arka plan betiğini bir JavaScript Service Worker'a taşımak, performansı, güvenliği artırma ve uzantınızı geleceğe hazırlama yolunda önemli bir adımdır. Geçiş bazı zorluklar sunsa da, faydaları çabaya kesinlikle değer. Bu kılavuzda belirtilen adımları izleyerek ve en iyi uygulamaları benimseyerek, sorunsuz ve başarılı bir geçiş sağlayabilir, dünya çapındaki kullanıcılarınız için daha iyi bir deneyim sunabilirsiniz. Service Worker'ların gücünden tam olarak yararlanmak için kapsamlı bir şekilde test etmeyi ve yeni olay güdümlü mimariye uyum sağlamayı unutmayın.

İleri Kaynaklar

• Chrome Uzantısı Manifest V3 Belgeleri
• Mozilla Service Worker API Belgeleri
• Service Worker Temelleri